<!-- MAIN CONTENT -->
<div id="content">
<div class="row">
    <big-breadcrumbs items="['Forms', 'Form Elements']" icon="table"
                     class="col-xs-12 col-sm-9 col-md-9 col-lg-9"></big-breadcrumbs>

    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <!-- Button trigger modal -->
        <a ng-click="openModal()" class="btn btn-success btn-lg pull-right header-btn hidden-mobile"><i
                class="fa fa-circle-arrow-up fa-lg"></i> Launch form modal</a>
    </div>
</div>


<div class="alert alert-block alert-success" dismisser>

    <h4 class="alert-heading"><i class="fa fa-check-square-o"></i> Check validation!</h4>

    <p>
        You may also check the form validation by clicking on the form action button. Please try and see the results
        below!
    </p>
</div>

<!-- widget grid -->

<section id="widget-grid" widget-grid>


<!-- START ROW -->

<div class="row">

<!-- NEW COL START -->
<article class="col-sm-12 col-md-12 col-lg-6">

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-1" data-widget-editbutton="false" data-widget-custombutton="false">
<!-- widget options:
    usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
    
    data-widget-colorbutton="false"	
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true" 
    data-widget-sortable="false"
    
-->
<header>
    <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

    <h2>Checkout Form </h2>

</header>

<!-- widget div-->
<div>


<!-- widget content -->
<div class="widget-body no-padding">

<div data-smart-include="app/forms/views/form-layouts/checkout-form.html"></div>
       

</div>
<!-- end widget content -->

</div>
<!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Registration form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">
            <div data-smart-include="app/forms/views/form-layouts/order-form.html"></div>
       
        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-7" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Review form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">

            <div data-smart-include="app/forms/views/form-layouts/review-form.html"></div>
       

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

</article>
<!-- END COL -->

<!-- NEW COL START -->
<article class="col-sm-12 col-md-12 col-lg-6">

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-4" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Registration form 11 </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">
        <div data-smart-include="app/forms/views/form-layouts/registration-form.html"></div>
        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-6" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Comment form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">

            <div data-smart-include="app/forms/views/form-layouts/comment-form.html"></div>
       

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->


<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-8" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Contacts form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">

            <div data-smart-include="app/forms/views/form-layouts/contacts-form.html"></div>
       

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->


</article>
<!-- END COL -->

</div>

<!-- END ROW -->

</section>

<!-- end widget grid -->


</div>
